<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<h:outputStylesheet name="registration.css" library="css" />
	<p:growl id="registrationGrowl" for="registrationGrowl"
		showDetail="true" />
	<h:form id="registrationForm">
		<h1>Regisztráció</h1>
		<h2>Amennyiben felkeltettük érdeklődésed néhány kattintással regisztrálhatsz oldalunkra!</h2>
		<h:panelGrid cellspacing="10" columns="3"
			columnClasses="registrationFirst ,registrationSecond, registrationThird">

			<p:outputLabel for="userNameInput" value="Felhasználónév" />
			<p:inputText id="userNameInput" maxlength="30"
				value="#{registrationController.user.userName}" />
			<p:message for="userNameInput" />
			<p:outputLabel for="pwd1" value="Jelszó" />
			<p:password id="pwd1" value="#{registrationController.user.password}" 
				maxlength="20" match="pwd2" required="true" validatorMessage="A jelszavaknak egyezniük kell"  feedback="true"   
                        promptLabel="Adj meg egy jelszót" weakLabel="Gyenge"  
                        goodLabel="Jó" strongLabel="Erős" inline="true" />
			<p:message for="pwd1" />
			<p:outputLabel for="pwd2" value="Jelszó ismét" />
			<p:password id="pwd2" value="#{registrationController.user.password}"
				maxlength="30" name="pwd2" required="true" />
			<p:message for="pwd2" />
			<p:outputLabel for="realNameInput" value="Név" />
			<p:inputText id="realNameInput" maxlength="20"
				value="#{registrationController.user.realName}" />
			<p:message for="realNameInput" />
			<p:outputLabel value="Nem" for="gender" />
			<p:selectOneRadio id="gender" style="width: 200px;"
				value="#{registrationController.user.gender}">
				<f:selectItems value="#{enumService.getGenderValues()}" var="g"
					itemValue="#{g}" itemLabel="#{g.toString()}" />
			</p:selectOneRadio>
			<p:message for="gender" />
			<p:outputLabel value="Súly" for="weightInput" />
			<pe:inputNumber id="weightInput" decimalPlaces="0" symbol=" kg"
				maxValue="300" symbolPosition="s"
				value="#{registrationController.user.weight}" />
			<p:message for="weightInput" />
			<p:outputLabel for="heightInput" value="Magasság" />
			<pe:inputNumber id="heightInput" decimalPlaces="0" symbol=" cm"
				maxValue="250" symbolPosition="s"
				value="#{registrationController.user.height}" />
			<p:message for="heightInput" />
			<p:outputLabel for="ageInput" value="Kor" />
			<pe:inputNumber id="ageInput" decimalPlaces="0" symbol=" év"
				maxValue="99" symbolPosition="s"
				value="#{registrationController.user.age}" />
			<p:message for="ageInput" />
		</h:panelGrid>
		<div class="registrationCommandDiv">
		<p:commandButton value="Regisztráció" id="registrationCommand"
			update="@form :registrationGrowl" process="@form"
			actionListener="#{registrationController.register()}">
		</p:commandButton>
		<p:commandButton id="clear" value="Töröl" update="@form"
			process="@this" actionListener="#{registrationController.reset()}">
			<p:resetInput target="@form" />
		</p:commandButton>
		</div>
	</h:form>

</ui:composition>